<template>
	<view class="dui-guide-wrapper" catchtouchmove="return" @touchmove.stop.prevent="touchmove" @mousewheel.stop.prevent="touchmove">
		<view class="dui-guide">
			<view class="dui-guide-area" :style="[guideAreaStyle(item)]" v-for="item in num" :key="item"></view>
		</view>
		<view class="popover" :style="popoverAreaStyle">
			<view class="tips">
				{{steps[step].tips}}
			</view>
			<image class="finger-icon" :class="{bottom:popoverAreaStyle.bottom}" src="../../static/finger.png" mode="aspectFit"></image>
		</view>
		<view class="btn-box" :class="{bottom:popoverAreaStyle.bottom}">
			<view class="btn skip-btn" @click="skip">
				跳过
			</view>
			<view class="btn next-btn" @click="nextStep">
				{{nextStepText}}
			</view>
		</view>
	</view>
</template>

<script>
	import pagesJson from '@/pages.json';
	export default {
		data() {
			return {
				num: 0,
				step: 0,
				gap: 10,
				rect: {},
				windowWidth: 0,
				windowHeight: 0
			}
		},
		emits: ['skip', 'finish'],
		props: {
			steps: Array
		},
		computed: {
			popoverAreaStyle() {
				const rect = this.rect;
				const top = rect.bottom + 55;
				const left = rect.left - this.gap;
				const maxWidth = this.windowWidth - left - 10;
				const style = {
					position: 'absolute',
					maxWidth: maxWidth + 'px',
					height: 'auto',
					top: top + 'px',
					left: left + 'px'
				}
				if (rect.bottom >= this.windowHeight * 0.6) {
					style.top = 'auto';
					style.bottom = this.windowHeight - rect.top + 55 + 'px'
				}
				return style;
			},
			nextStepText() {
				return this.step == this.steps.length - 1 ? '完成' : '下一步'
			}
		},
		created() {
			this.setWindowWH();
		},
		mounted() {
			setTimeout(() => {
				this.getElementRect(this.steps[0].element).then(res=>{
					this.rect = this.changeRectVal(res);
				});
				this.num = 4;
				this.step = 0;
			}, 0)
		},
		methods: {
			nextStep() {
				if (this.step + 1 > this.steps.length - 1) {
					uni.pageScrollTo({
						scrollTop: 0,
						duration: 200
					});
					this.finishCallBack();
					return;
				}
				this.step += 1;
				this.getElementRect(this.steps[this.step].element).then(res=>{
					if (res.bottom >= this.windowHeight - res.height) {
						uni.pageScrollTo({
							selector: this.steps[this.step].element,
							duration: 0,
						});
						setTimeout(() => {
							this.getElementRect(this.steps[this.step].element).then(res=>{
								this.rect = this.changeRectVal(res);
							});
						}, 0)
					} else {
						this.rect = this.changeRectVal(res);
					}
				});
			},
			touchmove() {},
			guideAreaStyle(item) {
				let style = {};
				const gap = this.gap;
				let {
					width,
					height,
					top,
					bottom,
					left,
					right
				} = this.rect;

				switch (item) {
					case 1:
						style = {
							width: '100%',
							height: top - gap + 'px'
						}
						break;
					case 2:
						style = {
							width: '100%',
							height: this.windowHeight - top - height - gap + 'px',
							top:top + height + gap + 'px'
						}
						break;
					case 3:
						style = {
							width: left - gap + 'px',
							height: height + gap * 2 + 'px',
							top: top - gap + 'px',
							left: 0,
						}
						break;
					case 4:
						style = {
							width: this.windowWidth - left - width - gap + 'px',
							height: height + gap * 2 + 'px',
							top: top - gap + 'px',
							right: 0
						}
						break;
				}
				return style;
			},
			getElementRect(selector) {
				return new Promise((resolve, reject) => {
					// #ifndef MP-ALIPAY
					const query = uni.createSelectorQuery();
					query
						.select(selector)
						.boundingClientRect((rect) => {
							resolve(rect)
						})
						.exec();
					// #endif
					// #ifdef MP-ALIPAY
					my.createSelectorQuery()
						.select(selector).boundingClientRect().exec((ret) => {
							resolve(ret[0])
						})
					// #endif
				})
			},
			setWindowWH() {
				let windowInfo = {};
				// #ifdef H5 || MP-WEIXIN || APP
				windowInfo = uni.getWindowInfo();
				// #endif

				// #ifdef MP-QQ
				windowInfo = qq.getSystemInfoSync();
				// #endif

				// #ifdef MP-ALIPAY
				windowInfo = my.getSystemInfoSync();
				// #endif

				// #ifdef MP-TOUTIAO || MP-LARK
				windowInfo = tt.getSystemInfoSync();
				// #endif

				// #ifdef MP-KUAISHOU
				windowInfo = ks.getSystemInfoSync();
				// #endif

				// #ifdef MP-BAIDU
				windowInfo = swan.getSystemInfoSync();
				// #endif

				// #ifdef MP-JD
				windowInfo = jd.getSystemInfoSync();
				// #endif

				// #ifdef MP-360
				const qhSystemInfo = qh.getSystemInfoSync();
				windowInfo.windowWidth = qhSystemInfo.screenWidth;
				windowInfo.windowHeight = qhSystemInfo.screenHeight;
				// #endif
				
				this.windowWidth = windowInfo.windowWidth;
				this.windowHeight = windowInfo.windowHeight;
				
				// #ifdef H5
				if(pagesJson.tabBar && pagesJson.tabBar.list && pagesJson.tabBar.list.length){
					this.windowHeight = windowInfo.windowHeight + 50;
				}
				// #endif
			},
			skip() {
				this.$emit('skip');
			},
			finishCallBack() {
				this.$emit('finish');
			},

			changeRectVal(rect) {
				let {
					width,
					height,
					top,
					left
				} = rect;
				width = Math.ceil(width);
				height = Math.ceil(height);
				top = Math.ceil(top);
				left = Math.ceil(left);
				// width = width % 2 == 0 ? width : width + 1;
				// height = height % 2 == 0 ? height : height + 1;
				// top = top % 2 == 0 ? top : top + 1;
				// left = left % 2 == 0 ? left : left + 1;
				rect.width = width;
				rect.height = height;
				rect.top = top;
				rect.left = left;
				return rect;
			}
		}
	};
</script>

<style scoped lang="scss">
	.dui-guide-wrapper {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		overflow: hidden;
		z-index: 999;
		.dui-guide {
			.dui-guide-area {
				position: absolute;
				background-color: rgba(0, 0, 0, 0.45);
			}
		}

		.popover {
			.finger-icon {
				position: absolute;
				bottom: 100%;
				width: 60rpx;
				height: 60rpx;
				animation: slide 0.3s ease-in-out infinite alternate;
				&.bottom {
					bottom: auto;
					top: 100%;
					transform: rotate(180deg);
					animation-name: slide-bottom;
				}
			}

			.tips {
				position: relative;
				padding: 15rpx 20rpx;
				font-size: 28rpx;
				border-radius: 6rpx;
				background-color: #fff;
				border: 4rpx solid #000;
			}
		}

		.btn-box {
			display: flex;
			align-items: center;
			justify-content: center;
			position: absolute;
			bottom: 50rpx;
			left: 40rpx;
			right: 40rpx;

			.btn {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 180rpx;
				height: 60rpx;
				font-size: 28rpx;
				font-weight: bold;
				color: #333;
				background-color: #ffd5c5;
				background-color: #fff;
				border-radius: 45rpx;
				border: 4rpx solid #000;
				&.skip-btn {
					margin-right: 60rpx;
					background-color: #ffce39;
				}
			}
		}
	}

	@keyframes slide {
		100% {
			transform: translateY(-20rpx);
		}
	}

	@keyframes slide-bottom {
		100% {
			transform: translateY(20rpx) rotate(180deg);
		}
	}
</style>